<template>
  <div>
    <!-- 填写注册方式 -->
    <form class="pwd-container">
      <p class="prompt-msg">为确认是您本人操作，请选择验证方式完成身份验证</p>
      <div class="login-mode">
        <span>注册方式：</span>
        <label for="pwd-email"><input type="radio" name="login-mode" value="email" id="pwd-email" checked v-model="login_mode">邮箱</label>
        <label for="pwd-phone"><input type="radio" name="login-mode" value="phone" id="pwd-phone" v-model="login_mode">手机号</label>
      </div>
      <div class="login-mode" v-if="login_mode=='email'">
        <span>邮箱：</span>
        <input type="text" name="email" class="content-input">
      </div>
      <div class="login-mode" v-if="login_mode=='phone'">
        <span>手机号：</span>
        <input type="text" name="phone" class="content-input">
      </div>
      <div class="pwd-slide">
        <Slide/>
      </div>
      <div class="next-btn" @click="popup">下一步</div>
    </form>
    <div class="pwd-footer">
      <p>如果忘记注册时用的邮箱或者手机号，请联系会员部：<a href="javascriped:;">xxxxxx.xxx</a></p>
    </div>
  </div>
</template>

<script>
import Slide from '@/components/Slide'

export default {
  name: 'Authentication',
  components: {
    Slide
  },
  data() {
    return {
      login_mode: 'email'
    }
  },
  mounted() {
    // 修改页面进度条样式
    this.$bus.$emit('changeStep', 'one')
  },
  methods: {
    // 通过事件总线显示弹窗或跳转
    popup() {
      // this.$bus.$emit('popupContent', '手机号不能为空')
      this.$router.replace('/login/password/newpassword')
    }
  }
}
</script>

<style lang='less' scoped>
.pwd-container {
  width: 513px;
  margin: 0 auto;

  .prompt-msg {
    padding-left: 30px;
    padding-bottom: 6px;
    margin-bottom: 14px;
    color: #999;
    border-bottom: 1px solid #c9d0dd;
    font-size: 16px;
  }

  .login-mode {
    margin-bottom: 12px;
    padding-left: 30px;

    label,
    input,
    span {
      font-size: 16px;
      color: #333;
    }

    span {
      width: 80px;
      text-align: right;
      display: inline-block;
    }

    label {
      margin-right: 20px;
    }

    input {
      margin-right: 4px;

      &:focus {
        border: 2px solid #000;
      }
    }

    .content-input {
      width: 304px;
      height: 44px;
      border-radius: 6px;
      border: 1px solid #eee;
      padding-left: 14px;
      background-color: #fff;
      outline: none;
    }
  }

  .pwd-slide {
      width: 304px;
      margin-left: 110px;
  }

  .next-btn {
      width: 218px;
      display: block;
      margin: 15px auto;
      border-radius: 6px;
      background-color: #0047ae;
      color: #fff;
      font-weight: bold;
      line-height: 39px;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
    }
}

.pwd-footer {
  border: 1px solid #cae0ff;
  background-color: #edf8ff;
  padding: 10px;

  p {
    font-size: 14px;

    a {
      font-size: 14px;

      &:active {
        color: #0047ae;
      }
    }
  }   
}
</style>